<div class="swiper-viewport">
  <div id="slideshow{{ module }}" class="swiper-container">
    <div class="swiper-wrapper">
      {% for banner in banners %}
        <div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid"/></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid" />{% endif %}</div>
      {% endfor %}
    </div>
  </div>
  <div class="swiper-pagination slideshow{{ module }}"></div>
  <div class="swiper-pager">
    <div class="swiper-button-next"><i class="fas fa-chevron-right"></i></div>
    <div class="swiper-button-prev"><i class="fas fa-chevron-left"></i></div>
  </div>
</div>
<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
  mode: 'horizontal',
  slidesPerView: 1,
  pagination: '.slideshow{{ module }}',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  autoplay: 2500,
  autoplayDisableOnInteraction: true,
  loop: true
});
--></script>


<div id="slideshow{{ module }}" class="full-slider">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {% for banner in banners %}
        <div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid"/></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid" />{% endif %}</div>
      {% endfor %}
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

    
<script>
  var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      hiddenClass: '.swiper-button-hidden',
    },
  })
  </script>